//	要过滤的数据集
import React, { RefObject, useState } from 'react';
import FormItem from 'antd/lib/form/FormItem';
import styles from 'src/pages/AnalyseManage/EditReport/index.module.scss';
import AddDataSet from './components/AddDataSet';

interface IProps {
	dataTables: Array<any>;
}

const FilterDataSet = ( props: IProps ) => {
	const [ fields, setFields ] = useState( [] );
	const modalRef: RefObject<any> = React.useRef();

	const handleModalVisible = () => {
		modalRef.current.openModal();
	};

	const pushField = ( field ) => {
		setFields( [ ...fields, field ] );
	};

	const handleDelete = ( index ) => {
		const fieldsCopy = [ ...fields ];
		fieldsCopy.splice( index, 1 );
		setFields( fieldsCopy );
	};

	return (
		<>
			<FormItem label="要过滤的数据集">
				<div className={ styles.data_model_field_holder }>
					{
						fields.map( ( field, index ) => {
							return (
								<div key={ field.code } className={ styles.data_set_field }>
									<span>
										{ field.modelName }[ { field.desc } ]
									</span>
									<span
										className={ `iconfont bdhshanchu ${ styles.bdhshanchu }` }
										onClick={ () => handleDelete( index ) }></span>
								</div>
							);
						} )
					}
					<div className={ styles.add_btn }>
						<span className={ `iconfont bdhxinzeng ${ styles.green_btn }` } onClick={ handleModalVisible }></span>
					</div>

				</div>
			</FormItem>

			<AddDataSet ref={ modalRef } { ...props } pushField={ pushField }></AddDataSet>
		</>
	);
};

export default React.memo( FilterDataSet );